<template>
  <div class="page">
     <div class="cutPriceEnd" v-show="endShow=='1'">
      <img class="endBg" src="http://img001.seefm.com.cn/image/bargain_share_end.png" alt="">
      <img class="goShop" @click="goShop()" src="@assets/images/cutPrice/goShop.png" alt="">
      <img class="btm" src="@assets/images/cutPrice/endBtm.png" alt="">
    </div>
    <!-- 个人中心 -->
    <div class="my" @click="goMy()">
      <img class="head" :src="userAvatar" alt="" />
      <span>个人中心</span>
    </div>
    <!-- 活动规则 -->
    <div class="rulebtn" @click="showRule()">活动规则</div>
    <div class="tip" v-show="endShow=='0'">活动火爆，部分商品被抢空 ，持续补货中</div>
    <img class="cutIndexBg" style="width:100%;height:5.58rem;" src="@assets/images/cutPrice/indexBgT.png" alt="" />
    <div class="code" v-show="from1=='app'"><input @blur.prevent="changeBlur()" @paste.native="pasteMe" v-model="order_id" type="text"><span @click="bargain()">立即砍价</span></div>
    <!-- <img class="cutIndexBg" style="width:100%;height:1.56rem;" src="@assets/images/cutPrice/indexBgB.png" alt="" /> -->
    <!-- 商品列表 -->
    <div class="mb136" v-show="endShow=='0'">
      <cutPriceTap :pageUrl="pageUrl" :from1="from1"></cutPriceTap>
    </div>
    <!-- 分享二维码 -->
        <sharePoster
          ref="child"
          :from1="from1"
          :shareShow="shareShow"
          :shareDate="shareDate"
          :category="category"
          @isShare="getIsShare()"
        ></sharePoster>
    <!-- 分享bottom -->
    <div class="Indexshare" v-show="endShow=='0'">
      <span class="shareTxt">分享页面,好友购买页面内商品得佣金</span>
      <span class="goShare" @click="goShare()">分享活动</span>
    </div>
    <!-- 活动规则 -->
    <div class="ruleBox" v-show="isRule == 1">
      <div class="ruleTip">
        <p class="ruleTitle">活动规则</p>
        <div class="rulecenter">
          <div class="rulecenter1">
            <p>1.用户选择商品并邀请好友助力砍价，下单可实现低价或0元购得商品，活动商品数量有限，先到先得；</p>
            <p>2.当期活动从2021年12月15日至2022年1月14日；</p>
            <p>3.用户需在5天内完成其发起的助力砍价任务并下单购买，5天内且当期活动有效期内未下单，则任务终止且无法再下单；</p>
            <p>4.每个用户在一期活动内最多可发起3次助力砍价任务；</p>
            <p>5.每个用户活动期间只能完成一次助力砍价；</p>
            <p>6.新用户获得的电商优惠券有效期为15天，可在APP、小程序、H5端“听见小店”内消费，不能用于本次活动；</p>
            <p>7.用户分享可分销商品给好友，好友购买后，用户每单可赚对应的佣金，佣金总额度不设上限。</p>
            <p>8.优先发货规则：所有购买成功的用户，进入活动首页-点击“分享活动”按钮-生成专属海报-分享海报至微信朋友圈，将朋友圈分享结果截图，再登录听见广播APP，点击“发现”页面上传朋友圈分享结果截图，审核通过后我们优先安排发货。</p>
            <p>朋友圈截图规则：分享朋友圈需带有分享语，不分组或私密，有“删除”按钮。</p>
            <p>9.物流查询：登录听见广播APP，点击“我的-我的订单”查看物流信息。</p>
            <p>10.提现说明：</p>
            <p>10.1 2022年2月14日-3月15日，用户打开听见广播APP“我的-我的钱袋-活动提现”提取佣金；</p>
            <p>10.2活动中赚取的佣金，至佣金提取之日起30日内有效，未提取视为自动放弃；</p>
            <p>10.3我们将依法为您代扣代缴相关税费后将税后金额支付至您的收款账户；</p>
            <p>11.在参与本活动过程中，用户如果出现违规行为（如作弊领取、恶意套取、虚假交易等），听见广播有权取消该用户参与。</p>
            <p>12.活动规则会根据实际运营情况进行调整且可能会提前终止，给您带来不便，敬请谅解。</p>
          </div>
        </div>
      </div>
      <div class="close" @click="close()">
        <img src="@assets/images/cutPrice/close.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import cookie from "js-cookie";
import cbct from "@common/base.js";
import { VUE_APP_WS_URL } from "@utils/index";
import cutPriceTap from "@components/cutPriceTap";
import sharePoster from "@components/sharePoster";
import shareMsg from "@common/shareConfig.js";
import share from "@common/share.js";
import { cutPrice,cutEnd } from "@api/cutPrice";
import { deviceType } from "@utils";
import {mapState} from 'vuex'
export default {
  name: "cutPriceIndex",
  components: {
    cutPriceTap,
    sharePoster
  },
  props: {},
  data: function() {
    return {
      shareShow: false,
      shareDate: {
        bg: require("@assets/images/cutPrice/shareBg.png"),
        title: "分享活动"
      },
      category: [
        {
          pic: require("@assets/images/cutPrice/wechat_share.png"),
          name: "微信",
          id: "1",
          number: "1"
        },
        {
          pic: require("@assets/images/cutPrice/wechatMonment_share.png"),
          name: "朋友圈",
          id: "2",
          number: "1"
        },
        {
          pic: require("@assets/images/cutPrice/weibo_share.png"),
          name: "微博",
          id: "4",
          number: "1"
        },
        {
          pic: require("@assets/images/cutPrice/savePicture.png"),
          name: "保存本地",
          id: "savePicture",
          number: "2"
        },
        // {
        //   pic: require("@assets/images/cutPrice/copy.png"),
        //   name: "复制链接",
        //   id: "10",
        //   number: "0"
        // }
      ],
      isRule: "0",
      avatar:'',
      from1: "h5",
      pageUrl: "",
      //分享用户的UId
      shareUserId:'',
      shareUrl:'',
      //活动是否结束
      endShow:'',
      // 听见小店橱窗id
      shopNumber:'',
      //砍价码订单id
      order_id:'',
    };
  },
  watch: {},
  computed:{
    ...mapState({
      cutUid:state => state.cut.cutUid,
      userAvatar:state => state.cut.avatar
    }),
  },
  mounted() {
    let that = this;
    document.scrollingElement.scrollTop = 0;
    if (this.from1 == "app") {
      this.appBridge("mute")
      this.appBridge("getParameter", { method: "setUserInfo" });
      window["onWebResponse"] = async str => {
        const {action,content} = await this.appResponse(str);
        if(action === 'setUserInfo'){
          this.init()
        }
        if(action==='shareH5'){
          this.goShare()
        }
      };
      if(deviceType() === 'android') this.appBridge("title", { title: "听见广播年货节" });
    }else{
      this.init()
    }
       //用户头像
  
  },
  created() {
    localStorage.cutUrl=window.location.href
    if (this.$route.query.from1) {
      this.from1 = this.$route.query.from1;
    }

    cookie.set("from1", this.from1);
    if(this.$route.query.shareUserId){
      this.pageUrl = 'cutPrice/cutPriceIndex?shareUserId='+this.$route.query.shareUserId
    }else{
      this.pageUrl = 'cutPrice/cutPriceIndex'
    }
  },
  destroyed(){
     window["onWebResponse"] = () => {
      
      };
  },
  methods: {
    pasteMe() {
        //获得粘贴的文字
        let self = this;
        var data = null;
        var clipboardData = e.clipboardData; // IE
        if (!clipboardData) {
            //chrome
            clipboardData = e.originalEvent.clipboardData;
        }
        data = clipboardData.getData("Text");
    },
      init() {
        this.isEnd();
        //  this.$dialog.toast({mes:'首页'})
        setTimeout(() => {
          if(cookie.get('token') != 'undefined' && cookie.get('token')&&cookie.get('token') != 'TOKEN'){
            this.$store.dispatch('cut/userInfo').then(() =>{
              this.shareU()
            })
          }else{
             this.shareU()
          }
          
          // if(!cookie.get('token')||cookie.get('token')=='undefined'){
          //   this.avatar=cbct.imgUrl()+'default_head.png' 
          // }else{
          //     //this.$dialog.success(cookie.get('token'));
          //   // this.baseuserinfo();
          //   this.$store.dispatch('userInfo')
          // }
         
        }, 100);
        
      },
      shareU(){
          this.shareUrl = `${VUE_APP_WS_URL}cutPrice/cutPriceIndex`;
          if(this.cutUid){
            this.shareUrl = `${VUE_APP_WS_URL}cutPrice/cutPriceIndex?shareUserId=${this.cutUid}`
          }
          if(this.from1=='app'){
              shareMsg.shareConfig(
                "app",
                "0",
                "0",
                "听见广播年货节  爆款好物千万补贴",
                "直接降!快去抢啊!",
                this.shareUrl,
                "http://img001.seefm.com.cn/image/bargain_share_2021.png",
                "",
                "1",
                "1"
              );
          }
            
          share.share(
            this.shareUrl,
            "听见广播年货节  爆款好物千万补贴",
            "直接降!快去抢啊!",
            "http://img001.seefm.com.cn/image/bargain_share_2021.png"
          );
          share.QQshare(
            this.shareUrl,
            "听见广播年货节  爆款好物千万补贴",
            "直接降!快去抢啊!",
            "http://img001.seefm.com.cn/image/bargain_share_2021.png"
          );
      },
    
    getIsShare(){
       this.shareShow=false;
    },
    // 去个人中心
    goMy(){
      if(!cookie.get('token')||cookie.get('token')=='undefined'||cookie.get('token')=='TOKEN'){
        if(this.from1=='app'){
           this.appBridge("login")
        }else{
            this.$router.push({ path: "/login" })
        }
          // this.gotoLoginPage()
      }else{
         this.$router.push({ path: `/cutPrice/cutPriceMy${this.from1 == 'app'?'?from1=app&endShow='+this.endShow:'?endShow='+this.endShow}` });
      }
      
    },
    //更多商品
    goShop(){
        if (this.from1 == "app") {
            this.$router.push({
              path:"/goods_list/"+this.shopNumber+"?from1=" + this.from1,
            });
        } else {
            this.$router.push({
                path: "/goods_list/"+this.shopNumber,
            });
        }
      },
    goShare(){
      if(this.endShow=='1'){
        return this.$dialog.toast({mes:'活动已结束'})
      }
      var self = this;
      if(!cookie.get('token')||cookie.get('token')=='TOKEN'||cookie.get('token')=='undefined'){
        if(self.from1=='app'){
           self.appBridge("login")
        }else{
            self.$router.push({ path: "/login" })
        }
      }else{
        self.shareShow=true;
        self.$refs.child.getimg()
      }
    },
    closeShare() {
      this.shareShow = false;
    },
    //活动是否结束
    isEnd() {
      cutEnd().then(res => {
        this.endShow = res.data.is_over
        this.shopNumber = res.data.shop_number
        // if(res.msg=='1'){
        //   self.$router.push({ path: '/cutPrice/cutPriceEnd'});
        // }
      });
    },
    focus() {
      setTimeout(function(){
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    //ios软键盘适配
    changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    },
    //砍价码订单id
    bargain(){
      if(this.order_id==''){
        return this.$dialog.toast({mes:'请输入砍价码'})
      }
      cutPrice({order_id:this.order_id}).then(res => {
        if(res.data.status=='0'){
          this.$dialog.success('砍价成功')
        }else{
          this.$dialog.success('已砍过该商品'); 
        }
         setTimeout(() => {
            this.$router.push({ path: `/cutPrice/cutPage?order_id=`+this.order_id+`${this.from1 == 'app'?'&from1=app':''}` });
          }, 1000);

        })
        .catch(res => {
          this.$dialog.error(res.msg); 
        });
    },
    showRule() {
      this.isRule = "1";
      document.querySelector('html').style.position ='fixed';
      document.querySelector('html').style.top ='0';
      document.querySelector('html').style.bottom ='0';
      //$("html").css("position", "fixed");
      // $("html").css("top", "0");
      // $("html").css("bottom", "0");
    },
    
    close() {
      this.isRule = "0";
      document.querySelector('html').style.position ='static';
      // $("html").css("position", "static");
    },
  }
};
</script>
<style scoped lang="scss">
.page {
  width: 100%;
  height: 100vh;
  background: #b51318;
  width: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left:0;
  top:0;
}
.cutPriceEnd{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    .endBg{
        width: 100%;
        display: block;
    }
    .goShop{
        position: absolute;
        top: 10rem;
        left: .75rem;
        width: 6rem;
        margin: 0 auto;
        display: block;
        z-index: 1;
    }
    .btm{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}
.tip{
  position: absolute;
  left:1.96rem;
  top:0.66rem;
  font-size: 0.22rem;
  font-weight: 400;
  color: #FFE4BB;
}
.my {
  position: absolute;
  top: 0.48rem;
  left: 0;
  width: 1.8rem;
  height: 0.64rem;
  line-height: 0.64rem;
  text-align: center;
  background: linear-gradient(276deg, #fb6c1d 0%, #f32a4b 100%);
  box-shadow: 0px 0.02rem 0.08rem 0px rgba(113, 0, 0, 0.5);
  border-radius: 0px 0.32rem 0.32rem 0px;
  z-index: 101;
  img {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    margin: 0.12rem 0.05rem 0.12rem 0.2rem;
  }
  span {
    color: #fff;
    font-size: 0.24rem;
    font-weight: 500;
  }
}

/* 活动规则 */
.rulebtn {
  position: absolute;
  top: 0.64rem;
  right: 0.16rem;
  color: #fff;
  font-size: 0.24rem;
  z-index: 101;
}
.ruleBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  z-index: 101;
}
.ruleTip {
  width: 6.12rem;
  height: 70vh;
  background: #ffffff;
  border-radius: 0.08rem;
  margin: 10vh auto 0.6rem;
  box-sizing: border-box;
}
.ruleTitle {
  font-size: 0.36rem;
  color: #000;
  font-weight: 500;
  text-align: center;
  padding: 0.46rem 0;
  box-sizing: border-box;
}
.rulecenter {
  width: 5.42rem;
  max-height: 55vh;
  margin: 0 0.36rem;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.rulecenter1 {
  width: 5.42rem;
  max-height: 55vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  p {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 0.28rem;
    line-height: 0.48rem;
    color: #000;
  }
  ::-webkit-scrollbar {
    display: none;
  }
}
.close {
  width: 0.48rem;
  height: 0.48rem;
  margin: 0 auto;
  img {
    width: 100%;
  }
}

.cutIndexBg {
  width: 100%;
  display: block;
}
.code{
  width: 6.28rem;
  height: .88rem;
  background: #F7F7F8;
  box-shadow: 0 .04rem .08rem 0 rgba(0, 0, 0, 0.2);
  border-radius: .12rem;
  margin: .3rem auto;
  display: flex;
  flex: 1;
  box-sizing: border-box;
}
.code input{
  display: inline-block;
  width: 3.88rem;
  height: .88rem;
  padding:0 .26rem ;
  box-sizing: border-box;
  font-size: .28rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  user-select:text;
  -webkit-user-select:text;
}
.code span{
  box-sizing: border-box;
  display: inline-block;
  width: 2.4rem;
  height: .88rem;
  background: linear-gradient(360deg, #F32A4B 0%, #FB6C1D 100%);
  box-shadow: 0 .04rem .08rem 0 rgba(0, 0, 0, 0.2), 0 .02rem .08rem 0 rgba(254, 0, 0, 0.5);
  border-radius: 0 .12rem .12rem 0;
  font-size: .32rem;
  color: #fff;
  line-height: .88rem;
  text-align: center;
  text-shadow: 0px .04rem .08rem rgba(0, 0, 0, 0.2);
  font-weight: 500;
}
.mb136 {
  position: relative;
  width: 100%;
  margin-bottom: 1.46rem;
}

.Indexshare {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.36rem;
  line-height: 1.36rem;
  background: #fff;
  box-shadow: 0 -0.04rem 0.1rem 0 rgba(252, 135, 135, 0.2);
  z-index: 2;
}
.shareTxt {
  font-size: 0.28rem;
  color: #000;
  float: left;
  margin-left: 0.3rem;
}
.goShare {
  display: block;
  width: 1.68rem;
  height: 0.6rem;
  background: #ff4e51;
  box-shadow: 0 -0.01rem 0 0 #ce0000;
  border-radius: 0.3rem;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.28rem;
  color: #fff;
  float: right;
  margin-right: 0.3rem;
  margin-top: 0.38rem;
}
</style>
